<template>
  <div class="page-header">
    <el-affix target=".main-container" :offset="20">
        <el-page-header @back="onBack">
          <template #breadcrumb>
            <breadcrumb/>
          </template>
          <template #icon>
            <el-icon>
              <Position/>
            </el-icon>
          </template>
          <template #title>
            <div class="logout">
              退出登录
            </div>
          </template>
          <template #content>
            <div class="flex items-center">
              <el-avatar
                  class="mr-3"
                  :size="30"
                  src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"
              />
              <span class="username-container"> 愣头崽 </span>
              <el-tag>教师</el-tag>
            </div>
          </template>

          <el-descriptions>
          </el-descriptions>
        </el-page-header>
    </el-affix>
  </div>
</template>

<script setup lang="ts">
import {ElMessage} from "element-plus";
import Breadcrumb from "./Breadcrumb.vue";
import {Position} from '@element-plus/icons-vue';

const onBack = () => {
  ElMessage.success('Back');
}
</script>

<style scoped lang="scss">
.page-header {
  height: 77px;
  margin-top: 20px;
  width: 100%;
}

.username-container {
  height: 100%;
}

.items-center {
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: center;
}
</style>